<template>
	<el-dialog :close-on-click-modal="false" :title="parameter.id ? ' 查看' : '添加'" :visible.sync="show" v-if="show" width="900px"
	 v-loading="loading">
		<el-form ref="form" :model="request.data" :inline="true" label-width="80px" :rules="rules">
			<el-row>
				<el-col :span="12">
					<el-form-item label="专属公司" prop="ename">
						<el-select v-model="request.data.eid" :disabled="true" clearable placeholder="请选择" @change="search">
							<el-option v-for="item in conpany" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="截单时间" prop="endtime">
							<el-time-select
							 	:disabled="true"
  								v-model="request.data.endtime"
  								:picker-options="{
    							start: '08:30',
    							step: '00:15',
    							end: '18:30'}"
  							placeholder="选择时间">
						</el-time-select>

						<!-- <el-date-picker v-model="request.data.endtime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> -->
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="菜单日期" prop="edate">
						<el-date-picker v-model="request.data.edate" :disabled="true" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="默认餐标" prop="remark">
						<el-input v-model="request.data.remark" :disabled="true" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="12">
					<el-form-item label="时段">
						<el-select v-model="request.data.type" :disabled="true" placeholder="请选择">
							<el-option label="午餐" :value="1"></el-option>
							<el-option label="晚餐" :value="2"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="备注" prop="remark">
						<el-input v-model="request.data.remark" :disabled="true" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24">
					<el-form-item label="备选套餐">
						
						<!-- <el-input v-model="value" autocomplete="off"></el-input> -->
						<template>
							<el-transfer  filterable :filter-method="filterMethod" filter-placeholder="按餐标价查找" v-model="value" :titles="['待选菜单','已选菜单']"
							 @change="TcrightChange" :data="data">
							</el-transfer>
						</template>

					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<center>
				<el-button @click="Cancel">退 出</el-button>
			</center>
		</div>
	</el-dialog>
</template>

<script>
	import utils from 'util/utils.js';
	import constant from 'util/constant.js';
	import validate from 'util/validate.js';
	import api from 'api/dishes/menu/menu.js';
	import api1 from 'api/business/setmeal/setmeal.js';
	export default {
		name: 'edit',
		data() {

			return {
				data: [],
				value: [],
				Tclist: [],
				total: [],
				exptxt: [],
				listData: [],
				checkright: [],
				checkindex: [],
				filterMethod(query, item) {
					return item.pinyin.indexOf(query) > -1
				},
				yesData: [1, 3],
				// 注意:key 的字符类型要一致!!!

				loading: false,
				show: this.isDisplay,
				request: utils.newRequest(),
				conpany: [],
				rules: {
					eid: [{
						validator: validate.required,
						trigger: 'blur'
					}],
					edate: [{
						validator: validate.required,
						trigger: 'blur'
					}],
					type: [{
						validator: validate.required,
						trigger: 'blur'
					}],
					exptxt: [{
						validator: validate.required,
						trigger: 'blur'
					}],
					endtime: [{
						validator: validate.required,
						trigger: 'blur'
					}],
					remark: [{
						validator: validate.required,
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			
			Cancel(){
				this.checkright = []
				this.value = []
				this.show = false
			}
			,
			//获取数据
			list() {
				var cities = []
				api1.list(this.request, response => {
					this.listData = response.data;
					
					for (var i = 0; i < response.data.records.length; i++) {
						cities.push({
							label: response.data.records[i].title + ' ' +response.data.records[i].price + '元',
							key: i,
							pinyin: response.data.records[i].title + ' ' +response.data.records[i].price + '元'
					})
	
	
					}
				if (this.parameter.id) {

					
						for (var index = 0; index < this.total.length; index++) {
							for (let i = 0; i < cities.length; i++) {
									
								if((this.total[index].title + ' '+ this.total[index].price+ '元') == cities[i].label){
									console.log(123)
									this.value.push(i)
								}
							}
						}

				// } else {
					
				// for (var i = 0; i < response.data.records.length; i++) {
				// 	cities.push({
				// 		label: response.data.records[i].title + ' ' +response.data.records[i].price + '元',
				// 		key: i,
				// 		pinyin: response.data.records[i].title + ' ' +response.data.records[i].price + '元'
				// })


				// }
						// }
				}
				this.data = cities
				})
			},
			//搜索
			search() {
				this.request.param.eid = this.request.data.eid
				this.list();
			},
			// handleChange(value, direction, movedKeys) {
			// 	console.log(value, direction, movedKeys);
			// 	//可以通过direction回调right/left 来进行操作，right：把数字移到右边，left把数据移到左边
			// 	if (direction === "right") {
			// 		console.log("left");
			// 	}
			// 	if (direction === "left") {
			// 		console.log("right");
			// 	}

			// },
			// 穿梭框右列表的值
			TcrightChange(data, index) {
				this.checkright = []
				for (var i = 0; i < data.length; i++) {
					const element = this.listData.records[this.data[data[i]].key]
					this.checkright.push(element)
				}
				console.log(this.checkright)
				
			},

			//清空搜索框
			clearSearchVal() {
				this.request.param = {};
			},

			//提交表单
			submitForm(formName) {
				utils.checkForm(this.$refs[formName], () => {
					this.loading = true;
					if (this.parameter.id) {
						this.request.data.exptxt = JSON.stringify(this.checkright)
						//编辑
						api.update(
							this.request,
							response => {
								utils.msg.success(response.msg);
								this.loading = false;
								this.show = false;
								this.$parent.list(this.$parent.request);
							},
							response => {
								utils.msg.warning(response.msg);
								this.loading = false;
							}
						);
					} else {
						
						this.request.data.exptxt = JSON.stringify(this.checkright)
						//添加
						api.save(
							this.request,
							response => {
								utils.msg.success(response.msg);
								this.loading = false;
								this.show = false;
								this.$parent.list(this.$parent.request);
							},
							response => {
								utils.msg.warning(response.msg);
								this.loading = false;
							}
						);
					}
				});
			},
			init() {
				this.checkright = []
				this.value = []
				this.conpany = [];
				this.request.param.eid = this.request.data.eid
				// 查询公司
				api1.getcompanys(this.request, response => {
					for (let index = 0; index < response.data.length; index++) {
						this.conpany.push({
							label: response.data[index].ename,
							value: response.data[index].id
						})
					}
				})


				this.request = utils.newRequest();
				if (this.parameter.id) {
				
					//编辑
					this.request.param.id = this.parameter.id;
					api.toUpdate(this.request, response => {
						this.request.data = response.data;
							this.request.param.eid = response.data.eid
						this.total = eval('(' + response.data.exptxt + ')')
						this.list()
					});
							
			
				} else {
					//添加
					this.data = []
					this.value = []
				}
			}
		},
		props: {
			isDisplay: {
				type: Boolean,
				default () {
					return false;
				}
			},
			parameter: {
				type: Array | Object,
				default () {
					return {};
				}
			}
		},
		watch: {
			isDisplay(val) {
				this.show = val;
				if (val) {
					this.init();
				}
			},
			show(val) {
				this.$emit('update:isDisplay', val);
			},
			parameter(val) {
				this.parameter = val;
			}
		}
	};
</script>

<style lang="scss">
	@import '~common/custom/css/common.scss';

	html,
	body,
	#app {
		padding: 0;
		margin: 0;
		height: 100%;
		width: 100%;
	}

	.el-card {
		box-shadow: 0 1px rgba(0, 0, 0, 0.15);
	}

	.el-transfer-panel__item.el-checkbox {
		text-align: left;
	}

	.el-transfer-panel .el-transfer-panel__header .el-checkbox {
		text-align: left;
	}

	.el-transfer {
		font-size: 14px;
		text-align: left;
	}
</style>
